<template>
  <div>
    <div class="box">
      <span class="span-1"></span>
      <span class="span-2"></span>
      <span class="span-3"></span>
      <span class="span-4"></span>
      <span class="span-5"></span>
      <span class="span-6"></span>
      <span class="text">商品新闻内容</span>
      <span class="spans-1"></span>
      <span class="spans-2"></span>
      <span class="spans-3"></span>
      <span class="spans-4"></span>
      <span class="spans-5"></span>
      <span class="spans-6"></span>
    </div>
  </div>
</template>
<script>
  export default {
    data: () => ({

    })
  }
</script>
<style lang="scss">
  @mixin aaa {
    border-radius: 100%;
    background: rgba(233, 84, 142);
    margin: 0 2px;
  }

  @for $i from 1 through 6 {
    .span-#{$i} {
      @include aaa;
      width: 8px + $i;
      height: 8px + $i;
      line-height:8px + $i;
    }
  }

  @for $i from 1 through 6 {
    .spans-#{$i} {
      @include aaa;
      width: 14px - $i;
      height: 14px - $i;
      line-height:8px + $i;
    }
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 30px;

    .text {
      padding: 0 10px;
      color: rgba(233, 84, 142);
    }
  }
</style>